<template>
  <div class="container">
    <div class="background">
      <!--      <div class="message">{{title}}</div>-->
      <button class="loginStyle" type="primary" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">微信登录</button>

      <!--      <div class="userinfo">-->
      <!--        <img class="userinfo-avatar" v-bind:src="userInfo.avatarUrl" mode="aspectFill" alt="头像"/>-->
      <!--        <p class="userinfo-nickname">{{userInfo.nickName}}</p>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
  export default {
    /**
     * 存储该页面所用到的数据
     * title:该页面的名字
     * code:使用wx.login获取的唯一标识，用于登陆
     * userInfo:使用getUserInfo获取的用户信息，包括头像和用户名称
     * serverIP:后端的IP地址，在此处进行全局设置，包括端口
     */
    data () {
      return {
        title: 'login page',
        code: '',
        userInfo: '',
        serverIP: ''
      }
    },
    /**
     * 功能：获取用户的信息，将服务器IP存入缓存
     * 描述：页面加载后触发onLoad事件，通过wx.login获取code，然后通过函数wxGetUserInfo获取具体的用户信息(头像和名称)
     *      将服务器IP通过wx.setStorageSyn全局缓存，供后面的页面使用
     */
    onLoad () {
      const self = this
      this.serverIP = process.env.BASE_API // 从环境获取BASE_API
      wx.setStorageSync('serverIP', this.serverIP)
      wx.showLoading({
        title: '请求授权中...'
      })
      wx.login({
        success (res) {
          if (res.code) {
            self.code = res.code
            self.wxGetUserInfo(res.code)
          }
        },
        fail (res) {
          console.log('login fail', res)
          wx.hideLoading()
          wx.showToast({
            title: 'wx.login fail ',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    methods: {
      /**
       * 功能：触发点击点击事件，进行授权登陆
       * 描述：将函数绑定到登陆按钮，触发授权请求，然后进行登陆。使用code，encryptedData，iv向后台获取用户的mpOpenId和sessionId，具体参考微信小程序文档
       */
      bindGetUserInfo (res) {
        if (res.mp.detail.userInfo) {
          let {encryptedData, iv, userInfo} = res.mp.detail
          this.userInfo = userInfo
          const self = this
          wx.request({
            url: this.serverIP + '/user/login',
            header: { 'Content-Type': 'application/json' },
            method: 'POST',
            data: {
              js_code: this.code,
              encryptedData: encryptedData,
              iv: iv
            },
            // 请求后端登陆成功
            success (res) {
              // 显示登陆成功
              // console.log(res)
              wx.showToast({
                title: '登陆成功',
                duration: 2000
              })
              // 同步存储本次登陆的信息，包括mpOpenId和sessionID
              wx.setStorageSync('mpOpenId', res.data.params.mpOpenId)
              console.log(res)
              wx.setStorageSync('sessionId', res.data.params.sessionId)
              self.wxGetUserInfo()
            },
            // 请求后端登陆失败
            fail (res) {
              wx.showToast({
                title: '登陆失败',
                icon: 'none',
                duration: 2000
              })
              console.log('backend fail' + res)
            }
          })
        } else {
          console.log('用户拒绝授权')
        }
      },
      /**
       * 功能：获取用户信息和路由
       * 描述：通过wx.getUserInfo获取用户信息，成功则进入主页面，失败则提示用户使用按钮进行登陆
       */
      wxGetUserInfo (code) {
        const self = this
        wx.getUserInfo({
          withCredentials: true,
          success (res) {
            // 登陆成功，前往index页面
            wx.hideLoading()
            self.userInfo = res.userInfo
            wx.redirectTo({
              url: '/pages/index/main',
              success () {
                wx.showToast({
                  title: '登陆成功',
                  duration: 2000
                })
              }
            })
          },
          // 没有授权，登陆失败，提示用户登陆
          fail (res) {
            wx.hideLoading()
            wx.showToast({
              title: '尚未登陆',
              icon: 'none',
              duration: 2000
            })
          }
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .background {
    background-image:url('');
    width: 100%;
    height: 1334rpx;
    background-repeat: no-repeat;
  }

  .loginStyle {
    width: 475rpx;
    top: 1015rpx;
    border-radius: 50rpx;
    background-color: rgba(0,0,0,1);
  }

  .message {
    color: red;
    padding: 10px;
    text-align: center;
  }

  .userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
  }

  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
